<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px;">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>挂号预约</el-breadcrumb-item>
            <el-breadcrumb-item>我的预约</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <h2>我的预约,共有<span style="color: #4cd5e7">{{registrationList.length}}</span>条</h2>
            <el-divider></el-divider>
             <el-table
                :data="registrationList"
                style="width: 100%">
                <el-table-column
                label="科室"
                width="150">
                <template slot-scope="scope">
                    <el-tag type="" closable v-text="scope.row.departmentName"></el-tag>
                </template>
                </el-table-column>
                <el-table-column
                label="挂号日期"
                width="180">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.date }}</span>
                </template>
                </el-table-column>
                <el-table-column
                label="姓名"
                width="180">
                <template slot-scope="scope">
                    <el-popover trigger="hover" placement="top">
                    <p>年龄: {{ scope.row.age }}</p>
                    <p>性别: {{ scope.row.gender }}</p>
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.userName }}</el-tag>
                    </div>
                    </el-popover>
                </template>
                </el-table-column>
                <el-table-column
                property="date"
                label="问诊地点"
                width="150">
                <template slot-scope="scope">
                    <span ><i class="el-icon-location"></i>{{scope.row.place}}</span>
                </template>
                </el-table-column>
                <el-table-column
                label="状态"
                width="150">
                <template slot-scope="scope">
                    <el-tag type="warning" effect="plain" v-if="scope.row.status==0">正在预约中</el-tag>
                    <el-tag type="" effect="plain" v-if="scope.row.status==1">预约成功，待问诊</el-tag>
                    <el-tag type="success" effect="plain" v-if="scope.row.status==2">已问诊</el-tag>
                </template>
                </el-table-column>
                <el-table-column label="操作">
                <template slot-scope="scope">
                    <!-- 接受预约 -->
                   
                    <el-tooltip class="item" effect="dark" content="接受预约" placement="top-start">
                   
                    <el-button
                    size="mini"
                    type="primary"
                    @click="handleAccept(scope.$index, scope.row)" icon="el-icon-edit" circle></el-button>
                   
                    </el-tooltip>
                    
                    <!-- 完成问诊 -->
                    <el-tooltip class="item" effect="dark" content="完成问诊" placement="top-start">
                   
                    <el-button
                    size="mini"
                    type="success"
                    @click="handleComplete(scope.$index, scope.row)" icon="el-icon-check" circle></el-button>
                   
                    </el-tooltip>
                    <!-- 取消接受 -->
                    
                    
                </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import {getManage} from '../../api/users'
import {getUserInfo} from '../../api/login'
import {updateStatus} from '../../api/users'
export default {
 //   inject:['reload'],
    name:"Manage",
     data() {
      return {
        registrationList: [],
        doctorId:'',
      }
    },
    methods: {
     async handleAccept(index, row) {
        if(row.status === 0 ) {
         const res = await this.$confirm("确定接受预约吗？","提示",{
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"

         }).catch(()=>{
             this.$message({
                        type: "info",
                        message: "已取消"
                    });
         });
         if (res == "confirm") {

                    const res = await updateStatus(1,row.registrationId);
                    console.log("确定！")
                    console.log(res)
                    if (res.data.code == 200){
                       // this[USERLOGOUT]()
                      //  this.$router.push("/manage");
                     // this.reload();
                     this.getManage();

                    }
                }

        console.log(index, row);
     }
      },
     async handleComplete (index, row) {
             if(row.status === 1 ) {
         const res = await this.$confirm("确定完成问诊了吗？","提示",{
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"

         }).catch(()=>{
             this.$message({
                        type: "info",
                        message: "已取消"
                    });
         });
         if (res == "confirm") {

                    const res = await updateStatus(2,row.registrationId);
                    console.log("确定！")
                    console.log(res)
                    if (res.data.code == 200){
                       // this[USERLOGOUT]()
                      //  this.$router.push("/manage");
                     // this.reload();
                     this.getManage();

                    }
                }

        console.log(index, row);
     }
      },

      async getManage() {
          const res1 = await getUserInfo();
          console.log(res1)
          this.doctorId = res1.data.data.userInfo.userId;

          const res = await getManage(this.doctorId);
          this.registrationList = res.data.data.registrationList;
          console.log(res)
      }
    },

    mounted() {
        this.getManage();
    }
    

}
</script>

<style>


</style>